<template>
	<view class="mian" v-if="detailData">
		<scroll-view class="scroll-view_list" scroll-y="true">
			<view class="mian_content">
				<view v-if="detailData?.image" class="img_goods">
					<image
						class="img"
						mode="aspectFit"
						lazy-load
						:src="detailData?.image"
					></image>
				</view>
				<view v-else class="void_goods">
					<image class="img" src="/static/goods.svg" mode="aspectFit"></image>
					<view class="tip">暂无图片</view>
				</view>
				<view class="goods_main">
					<view class="brand">
						<view class="goods_name">
							{{ detailData?.goodsName }}
						</view>
						<template v-if="detailData?.register">
							<span class="tag" v-if="!detailData?.overInsured">在保</span>
							<span class="tag tag_p" v-else>已过保</span>
							<span class="day_color" v-if="!detailData?.overInsured">
								质保周期:{{ detailData?.warrantyDay }}天
							</span>
						</template>
						<template v-else>
							<span class="tag tag_p">未激活质保</span>
						</template>
					</view>
					<view class="goods_ms">
						<span class="list_item">
							<span>型号：</span>
							<span class="mo">{{ detailData?.goodsModel }}</span>
						</span>
						<span class="list_item">
							<span>规格：</span>
							<span class="mo">{{ detailData?.goodsSpecName }}</span>
						</span>
					</view>
				</view>
				<view class="card">
					<view class="code_num">
						<view class="">
							<span class="c9">条码：</span>
							{{ detailData?.code }}
						</view>
						<image
							class="btn_c"
							@click="copy(detailData?.code)"
							src="/static/copy.svg"
							mode=""
						></image>
					</view>
					<view class="code_num">
						<p>
							<span class="c9">质保开始：</span>
							{{ detailData?.warrantyStartTime }}
						</p>
					</view>
					<view class="time">
						<p>
							<span class="c9">质保结束：</span>
							{{ detailData?.warrantyEndTime }}
						</p>
					</view>
				</view>
				<view class="service">
					<p class="title_tip">便捷服务</p>
					<view class="card_min">
						<view
							class="content_c"
							v-for="(i, index) in dataList1"
							@click="ondataList(index)"
							wx:key="index"
						>
							<image
								class="bor_img"
								:class="{ctrl_svg: index == 3}"
								:src="i.icon"
							></image>
							<span class="text">
								{{ i.text }}
							</span>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 弹出申请方式-->
		<wayType
			ref="wayTypeRef"
			@value-change="addWorkor"
			:showpopup="showBottom"
		></wayType>
		<uni-popup
			ref="popupImg"
			:is-mask-click="false"
			background-color="#fff"
			type="center"
		>
			<view
				style="
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 50rpx 30rpx 20rpx;
					gap: 20rpx;
				"
			>
				<view
					style="
						display: flex;
						justify-content: flex-end;
						width: 100%;
						position: absolute;
						top: 0;
					"
				>
					<uni-icons
						class="icon"
						color="#ccc"
						@click="popupImg.close()"
						size="32"
						type="clear"
					></uni-icons>
				</view>
				<view
					style="
						border: 1px solid #eee;
						width: 420rpx;
						height: 420rpx;
						padding: 12rpx;
						margin: 20rpx;
					"
				>
					<image
						mode="aspectFit"
						:show-menu-by-longpress="true"
						style="width: 420rpx; height: 420rpx"
						:src="detailData.qrImage"
					></image>
				</view>
				<span
					style="
						font-size: 28rpx;
						color: #007cff;
						display: flex;
						align-items: center;
						justify-content: center;
					"
					@click="jumpLink"
				>
					产品蓝牙遥控小程序
					<uni-icons type="right" color="#007cff"></uni-icons>
				</span>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import {ref} from 'vue';
	import {onLoad, onPullDownRefresh, onUnload} from '@dcloudio/uni-app';
	import apiGoods from '@/util/api/goods.js';
	import store from '@/store/index.js';
	import wayType from '@/components/u-user/wayType.vue';
	import apiCode from '@/util/api/code.js';
	const wayTypeRef = ref();
	const showBottom = ref(false); //申请工单弹窗

	const popupImg = ref(null); //弹窗二维码
	const detailData = ref(null);
	const goodsId = ref('');
	// 通过onLoad接收数据
	onLoad((e) => {
		goodsId.value = e.id;
		getDetail(e.id);
	});
	onUnload(() => {
		uni.hideLoading();
	});
	// 刷新
	onPullDownRefresh(async () => {
		await Promise.all([getDetail(goodsId.value)]).then(() => {
			uni.stopPullDownRefresh();
		});
	});
	// 复制
	const copy = (val: any) => {
		uni.setClipboardData({
			data: val,
			success: function () {
				//调用方法成功
				uni.showToast({
					title: '已复制',
					icon: 'none',
				});
			},
		});
	};
	// 获取商品详情
	const getDetail = async (id) => {
		if (!id) return;
		uni.showLoading({
			mask: true,
			title: '加载中...',
		});
		await apiGoods.getGoodsDetail(id).then((res: {code: number; data: any}) => {
			if (res.code === 20000) {
				detailData.value = res.data.row;
			}
		});
		uni.hideLoading();
	};
	const dataList1 = ref([
		{
			icon: '/static/home/serve/home1.svg',
			text: '安装服务',
		},
		{
			icon: '/static/home/serve/home2.svg',
			text: '维修服务',
		},
		// {
		// 	icon: '/static/home/serve/home4.svg',
		// 	text: '旧机返厂',
		// },
		// {
		// 	icon: '/static/home/serve/home5.svg',
		// 	text: '蓝牙遥控',
		// },
		// {
		// 	icon: '/static/home/spzl.svg',
		// 	text: '查看知识库',
		// },
		{
			icon: '/static/home/sfbz.svg',
			text: '收费标准',
		},

		// {
		// 	icon: "/static/home/pjjg.svg",
		// 	text: "配件价格",
		// }
	]);
	// 长青小程序  家电遥控
	const jumpLink = () => {
		uni.navigateToMiniProgram({
			appId: 'wx2d353c114cb08e18',
			path: 'pages/deviceList/deviceList',
		});
	};
	// 便捷服务
	const ondataList = async (val) => {
		switch (val) {
			case 0:
				store.commit('setorderGoodsTypes', []);
				store.commit('setchackFaultList', []);
				store.commit('setchackFaultItem', {id: null});
				store.commit('setWayType', {});
				store.commit('setcheckBrandItem', {id: null});
				store.commit('setcheckClassifyItem', {id: null});
				store.commit('setappointmentTime', null);
				store.commit('setUserOrder', {
					address: '', //客户详细地址
					area: '', //地址-县/区
					city: '', //地址-市
					helpOtherCreateOrder: false, //	是否代他人建单：0-否，1-是
					name: '', //客户姓名
					otherPhone: '', //其他电话
					phone: '', //客户手机号
					province: '', //地址-省
					town: '', //地址-镇
					userId: null,
				});
				await wayTypeRef.value.open(1);
				showBottom.value = true;
				break;
			case 1:
				store.commit('setorderGoodsTypes', []);
				store.commit('setchackFaultList', []);
				store.commit('setchackFaultItem', {id: null});
				store.commit('setWayType', {});
				store.commit('setcheckBrandItem', {id: null});
				store.commit('setcheckClassifyItem', {id: null});
				store.commit('setappointmentTime', null);
				store.commit('setUserOrder', {
					address: '', //客户详细地址
					area: '', //地址-县/区
					city: '', //地址-市
					helpOtherCreateOrder: false, //	是否代他人建单：0-否，1-是
					name: '', //客户姓名
					otherPhone: '', //其他电话
					phone: '', //客户手机号
					province: '', //地址-省
					town: '', //地址-镇
					userId: null,
				});
				await wayTypeRef.value.open(2);
				// showBottom.value = true
				break;
			case 2:
				uni.showToast({
					title: '正在维护中，敬请期待...',
					duration: 2000,
					icon: 'none',
				});
				break;
			case 3:
				if (detailData.value.qrImage) {
					popupImg.value.open();
				} else {
					uni.showModal({
						title: '提示',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#007cff',
						content: '该商品暂无该内容！',
					});
				}
				break;
			case 5:
				uni.showLoading({
					mask: true,
					title: '加载中...',
				});
				apiCode.getGoodsTypeBySNCode(detailData.value?.code).then((res) => {
					uni.hideLoading();
					if (res.code == 20000) {
						if (res.data.row.length > 0) {
							uni.navigateTo({
								url: '/pages_user/fee/standard?id=' + res.data.row[0].id,
							});
						} else {
							uni.showModal({
								title: '提示',
								showCancel: false,
								confirmText: '确认',
								confirmColor: '#007cff',
								content: '该商品暂无收费标准内容！',
							});
						}
					}
				});
				break;
			default:
				uni.showToast({
					title: '正在维护中，敬请期待...',
					duration: 2000,
					icon: 'none',
				});
				break;
		}
	};
	// 选择申请方式
	const addWorkor = (item) => {
		store.commit('setWayType', {
			id: item.id,
			name: item.name,
			type: item.type, //1安装
		});
		showBottom.value = false;
		uni.navigateTo({
			url: '/pages_user/home/add?code=' + detailData.value.code,
		});
	};
</script>

<style lang="scss" scoped>
	.mian {
		background-color: #f6f7fa;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		overflow-y: hidden;
		display: flex;
		flex-direction: column;

		.scroll-view_list {
			height: 100%;
			flex: 1;

			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
			}

			.mian_content {
				padding-bottom: 100rpx;
			}
		}

		.img_goods {
			height: 460rpx;
			background-color: #f6f7fa;

			.img {
				width: 100%;
			}
		}

		.void_goods {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			height: 460rpx;
			background-color: #f6f7fa;

			.img {
				width: 60%;
				height: 200rpx;
			}

			.tip {
				color: #aaa;
				font-size: 28rpx;
			}
		}

		.goods_main {
			margin: 0 0 24rpx;
			background-color: #fff;
			padding: 24rpx;

			.brand {
				color: #000;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-bottom: 18rpx;
				width: 100%;
				word-wrap: break-word;
				word-break: break-all;
				gap: 8rpx;
				column-gap: 8rpx;

				.tag {
					background-color: #007cff;
					color: #fff;
					font-size: 22rpx;
					padding: 2rpx 4rpx;
					border-radius: 4rpx;
					height: 28rpx;

					&.tag_p {
						background-color: #ccc;
						color: #fff;
					}
				}

				.day_color {
					background-color: #007cff;
					color: #fff;
					font-size: 22rpx;
					padding: 2rpx 4rpx;
					border-radius: 4rpx;
					height: 28rpx;
				}

				.tip {
					max-width: 300rpx;
					color: #007cff;
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.goods_name {
				font-weight: bold;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}

			.goods_ms {
				display: flex;
				flex-direction: column;
				font-size: 24rpx;
				flex-wrap: wrap;
				color: #777;
				column-gap: 12rpx;
				row-gap: 12rpx;

				.list_item {
					display: flex;
					font-size: 24rpx;
					flex-wrap: wrap;
					color: #777;
					row-gap: 12rpx;
				}

				.mo {
					color: #000;
					flex: 1;
					word-wrap: break-word;
					word-break: break-all;
				}
			}
		}

		.card {
			margin: 24rpx 0;
			background-color: #fff;
			padding: 24rpx;
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			row-gap: 14rpx;

			.code_num {
				display: flex;
				align-items: center;
				column-gap: 24rpx;

				.btn_c {
					height: 30rpx;
					line-height: 30rpx;
					width: 24rpx;
				}
			}

			.c9 {
				color: #777;
			}

			.time {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.card_k {
					display: flex;
					align-items: center;
					line-height: 24rpx;
					height: 24rpx;

					.bule {
						color: #007cff;
						margin-right: 14rpx;
						line-height: 24rpx;
						height: 24rpx;
					}
				}
			}
		}

		.service {
			margin: 24rpx 0;
			background-color: #fff;
			padding: 24rpx;

			.title_tip {
				font-size: 30rpx;
				font-weight: bold;
				color: #000;
			}

			.card_min {
				align-items: center;
				width: 100%;
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(calc(100% / 3), 1fr));
				row-gap: 24rpx;
				padding: 24rpx 0;

				.content_c {
					// width: calc(100%/3);
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					row-gap: 6rpx;

					.bor_img {
						width: 60rpx;
						height: 60rpx;
						background-color: #f2f9ff;
						padding: 14rpx;
						border-radius: 10rpx;
					}

					.ctrl_svg {
						width: 64rpx;
						height: 64rpx;
					}

					.text {
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
